<template>
  <view class="search-date-range">
    <view class="example-body">
      <!-- 日期范围选择器 -->
      <uni-datetime-picker class="date" v-model="dateRange" type="daterange" start-placeholder="开始日期"
        end-placeholder="结束日期" @change="handleDateChange" />
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 初始化日期范围
        dateRange: {
          start: '',
          end: '',
        },
      };
    },
    methods: {
      handleDateChange(e) {
        // 更新日期范围
        const date = e;
        this.dateRange.start = date[0] || '';

        // 如果有结束日期，则在结束日期基础上加1天
        if (date[1]) {
          let endDate = new Date(date[1]);
          endDate.setDate(endDate.getDate() + 1); // 加1天
          this.dateRange.end = endDate.toISOString(); // 转换为ISO字符串格式
        } else {
          this.dateRange.end = '';
        }

        // 将日期范围通过事件发出
        this.$emit('search', this.dateRange);
        console.log(this.dateRange);
      },
    },
  };
</script>

<style scoped>
  .search-date-range {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
  }

  .example-body {
    width: 100%;
    display: flex;
    flex-direction: row;
    /* 根据需要调整高度 */
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
  }

  .date {
    width: 80%;
  }
</style>